<template>
  <el-row class="view-panel">
    <div
      v-if="!pluginShow && properties.length === 0"
      class="no-properties"
    >
      {{ $t('chart.chart_no_properties') }}
    </div>
    <plugin-com
      v-if="pluginShow"
      style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;"
      class="attr-style theme-border-class"
      :component-name="view.type + '-style'"
      :obj="{ view, param, chart, dimensionData, quotaData }"
    />
    <div
      v-if="!pluginShow && properties.length > 0"
      style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;padding-right: 6px"
      class="attr-style theme-border-class"
    >
      <!-- 图形属性 -->
      <el-row
        v-show="showPropertiesCollapse([
          'color-selector', 'size-selector', 'size-selector-ant-v',
          'label-selector', 'label-selector-ant-v',
          'tooltip-selector', 'tooltip-selector-ant-v',
          'total-cfg', 'suspension-selector','size-selector-element-ui','field-selector-element-ui'])"
        class="de-collapse-style"
      >
        <span class="padding-lr">{{ $t('chart.shape_attr') }}</span>
        <el-collapse
          v-model="attrActiveNames"
          class="style-collapse"
        >
          <el-collapse-item
            v-show="showPropertiesCollapse(['color-selector'])"
            class="colorSelector"
            name="color"
            :title="$t('chart.color')"
          >
            <color-selector
              :param="param"
              class="attr-selector"
              :chart="chart"
              :property-inner="propertyInnerAll['color-selector']"
              @onColorChange="onColorChange($event, 'color-selector')"
            />
          </el-collapse-item>
          <el-collapse-item
            v-show="showPropertiesCollapse(['size-selector'])"
            name="size"
            :title="(chart.type && chart.type.includes('table')) ? $t('chart.table_config') : $t('chart.size')"
          >
            <size-selector
              :param="param"
              class="attr-selector"
              :property-inner="propertyInnerAll['size-selector']"
              :chart="chart"
              @onSizeChange="onSizeChange($event, 'size-selector')"
            />
          </el-collapse-item>
          <el-collapse-item
            v-show="showPropertiesCollapse(['size-selector-ant-v'])"
            name="size"
            :title="(chart.type && chart.type.includes('table')) ? $t('chart.table_config') : $t('chart.size')"
          >
            <size-selector-ant-v
              :param="param"
              class="attr-selector"
              :chart="chart"
              :property-inner="propertyInnerAll['size-selector-ant-v']"
              :quota-fields="quotaData"
              @onSizeChange="onSizeChange($event, 'size-selector-ant-v')"
            />
          </el-collapse-item>
          <!-- element-ui 配置 -->
          <el-collapse-item
            v-show="showPropertiesCollapse(['size-selector-element-ui'])"
            name="size"
            :title="(chart.type && chart.type.includes('table')) ? $t('chart.table_config') : $t('chart.size')"
          >
            <size-selector-element-ui
              :param="param"
              class="attr-selector"
              :chart="chart"
              :property-inner="propertyInnerAll['size-selector-element-ui']"
              :quota-fields="quotaData"
              @onSizeChange="onSizeChange($event, 'size-selector-element-ui')"
            />
          </el-collapse-item>
          <el-collapse-item
            v-show="showPropertiesCollapse(['field-selector-element-ui'])"
            name="field"
            :title="$t('chart.field_elector_element_ui')"
          >
            <field-selector-element-ui
              :param="param"
              class="attr-selector"
              :chart="chart"
              :property-inner="propertyInnerAll['field-selector-element-ui']"
              @onFieldChange="onFieldChange($event, 'field-selector-element-ui')"
            />
          </el-collapse-item>
          <el-collapse-item
            v-show="showPropertiesCollapse(['label-selector', 'label-selector-ant-v'])"
            name="label"
            :title="$t('chart.label')"
          >
            <label-selector
              v-if="showProperties('label-selector')"
              :param="param"
              class="attr-selector"
              :chart="chart"
              :property-inner="propertyInnerAll['label-selector']"
              @onLabelChange="onLabelChange($event, 'label-selector')"
            />
            <label-selector-ant-v
              v-else-if="showProperties('label-selector-ant-v')"
              :param="param"
              class="attr-selector"
              :chart="chart"
              :property-inner="propertyInnerAll['label-selector-ant-v']"
              @onLabelChange="onLabelChange($event, 'label-selector-ant-v')"
            />
          </el-collapse-item>
          <el-collapse-item
            v-show="showPropertiesCollapse(['tooltip-selector', 'tooltip-selector-ant-v'])"
            name="tooltip"
            :title="$t('chart.tooltip')"
          >
            <tooltip-selector
              v-if="showProperties('tooltip-selector')"
              :param="param"
              class="attr-selector"
              :chart="chart"
              :property-inner="propertyInnerAll['tooltip-selector']"
              @onTooltipChange="onTooltipChange($event, 'tooltip-selector')"
            />
            <tooltip-selector-ant-v
              v-else-if="showProperties('tooltip-selector-ant-v')"
              :param="param"
              class="attr-selector"
              :chart="chart"
              :property-inner="propertyInnerAll['tooltip-selector-ant-v']"
              @onTooltipChange="onTooltipChange($event, 'tooltip-selector-ant-v')"
            />
          </el-collapse-item>
          <el-collapse-item
            v-show="showPropertiesCollapse(['total-cfg'])"
            name="totalCfg"
            :title="$t('chart.total_cfg')"
          >
            <total-cfg
              :param="param"
              class="attr-selector"
              :chart="chart"
              :property-inner="propertyInnerAll['total-cfg']"
              @onTotalCfgChange="onTotalCfgChange($event, 'total-cfg')"
            />
          </el-collapse-item>
          <el-collapse-item
            v-show="showPropertiesCollapse(['suspension-selector'])"
            name="suspension"
            :title="$t('chart.suspension')"
          >
            <suspension-selector
              :param="param"
              class="attr-selector"
              :chart="chart"
              :property-inner="propertyInnerAll['suspension-selector']"
              @onSuspensionChange="onSuspensionChange($event, 'suspension-selector')"
            />
          </el-collapse-item>
        </el-collapse>
      </el-row>
      <!-- 组件样式 -->
      <el-row class="de-collapse-style">
        <span class="padding-lr">{{ $t('chart.module_style') }}</span>
        <el-collapse
          v-model="styleActiveNames"
          class="style-collapse"
        >
          <el-collapse-item
            v-show="showPropertiesCollapse(['x-axis-selector', 'x-axis-selector-ant-v'])"
            name="xAxis"
            :title="$t('chart.xAxis')"
          >
            <x-axis-selector
              v-if="showProperties('x-axis-selector')"
              :param="param"
              class="attr-selector"
              :chart="chart"
              :property-inner="propertyInnerAll['x-axis-selector']"
              @onChangeXAxisForm="onChangeXAxisForm($event, 'x-axis-selector')"
            />
            <x-axis-selector-ant-v
              v-else-if="showProperties('x-axis-selector-ant-v')"
              :param="param"
              class="attr-selector"
              :chart="chart"
              :property-inner="propertyInnerAll['x-axis-selector-ant-v']"
              @onChangeXAxisForm="onChangeXAxisForm($event, 'x-axis-selector-ant-v')"
            />
          </el-collapse-item>
          <el-collapse-item
            v-show="showPropertiesCollapse(['y-axis-selector', 'y-axis-selector-ant-v'])"
            name="yAxis"
            :title="view.type === 'chart-mix' ? $t('chart.yAxis_main') : $t('chart.yAxis')"
          >
            <y-axis-selector
              v-if="showProperties('y-axis-selector')"
              :param="param"
              class="attr-selector"
              :chart="chart"
              :property-inner="propertyInnerAll['y-axis-selector']"
              @onChangeYAxisForm="onChangeYAxisForm($event, 'y-axis-selector')"
            />
            <y-axis-selector-ant-v
              v-else-if="showProperties('y-axis-selector-ant-v')"
              :param="param"
              class="attr-selector"
              :chart="chart"
              :property-inner="propertyInnerAll['y-axis-selector-ant-v']"
              @onChangeYAxisForm="onChangeYAxisForm($event, 'y-axis-selector-ant-v')"
            />
          </el-collapse-item>
          <el-collapse-item
            v-show="showPropertiesCollapse(['y-axis-ext-selector', 'y-axis-ext-selector-ant-v'])"
            name="yAxisExt"
            :title="$t('chart.yAxis_ext')"
          >
            <y-axis-ext-selector
              v-if="showProperties('y-axis-ext-selector')"
              :param="param"
              class="attr-selector"
              :chart="chart"
              :property-inner="propertyInnerAll['y-axis-ext-selector']"
              @onChangeYAxisForm="onChangeYAxisExtForm($event, 'y-axis-ext-selector')"
            />
            <y-axis-ext-selector-ant-v
              v-else-if="showProperties('y-axis-ext-selector-ant-v')"
              :param="param"
              class="attr-selector"
              :chart="chart"
              :property-inner="propertyInnerAll['y-axis-ext-selector-ant-v']"
              @onChangeYAxisForm="onChangeYAxisExtForm($event, 'y-axis-ext-selector-ant-v')"
            />
          </el-collapse-item>
          <el-collapse-item
            v-show="showPropertiesCollapse(['split-selector', 'split-selector-ant-v'])"
            name="split"
            :title="$t('chart.split')"
          >
            <split-selector
              v-if="showProperties('split-selector')"
              :param="param"
              class="attr-selector"
              :chart="chart"
              :property-inner="propertyInnerAll['split-selector']"
              @onChangeSplitForm="onChangeSplitForm($event, 'split-selector')"
            />
            <split-selector-ant-v
              v-else-if="showProperties('split-selector-ant-v')"
              :param="param"
              class="attr-selector"
              :chart="chart"
              :property-inner="propertyInnerAll['split-selector-ant-v']"
              @onChangeSplitForm="onChangeSplitForm($event, 'split-selector-ant-v')"
            />
          </el-collapse-item>
          <el-collapse-item
            v-show="showPropertiesCollapse(['title-selector', 'title-selector-ant-v'])"
            name="title"
            :title="$t('chart.title')"
          >
            <title-selector
              v-if="showProperties('title-selector')"
              :param="param"
              class="attr-selector"
              :chart="chart"
              :property-inner="propertyInnerAll['title-selector']"
              @onTextChange="onTextChange($event, 'title-selector')"
            />
            <title-selector-ant-v
              v-else-if="showProperties('title-selector-ant-v')"
              :param="param"
              class="attr-selector"
              :chart="chart"
              :property-inner="propertyInnerAll['title-selector-ant-v']"
              @onTextChange="onTextChange($event, 'title-selector-ant-v')"
            />
          </el-collapse-item>
          <el-collapse-item
            v-show="showPropertiesCollapse(['legend-selector', 'legend-selector-ant-v'])"
            name="legend"
            :title="$t('chart.legend')"
          >
            <legend-selector
              v-if="showProperties('legend-selector')"
              :param="param"
              class="attr-selector"
              :chart="chart"
              :property-inner="propertyInnerAll['legend-selector']"
              @onLegendChange="onLegendChange($event, 'legend-selector')"
            />
            <legend-selector-ant-v
              v-else-if="showProperties('legend-selector-ant-v')"
              :param="param"
              class="attr-selector"
              :chart="chart"
              :property-inner="propertyInnerAll['legend-selector-ant-v']"
              @onLegendChange="onLegendChange($event, 'legend-selector-ant-v')"
            />
          </el-collapse-item>
          <el-collapse-item
            v-if="view.customStyle && view.customStyle.background"
            name="background"
            :title="$t('chart.background')"
          >
            <background-color-selector
              :param="param"
              class="attr-selector"
              :chart="chart"
              @onChangeBackgroundForm="onChangeBackgroundForm($event, 'background-color-selector')"
            />
          </el-collapse-item>
          <el-collapse-item
            v-show="showPropertiesCollapse(['margin-selector'])"
            name="margin"
            :title="$t('panel.margin')"
          >
            <margin-selector
              v-if="showProperties('margin-selector')"
              :param="param"
              class="attr-selector"
              :chart="chart"
              :property-inner="propertyInnerAll['margin-selector']"
              @onMarginChange="onMarginChange($event, 'margin-selector')"
            />

          </el-collapse-item>
        </el-collapse>
      </el-row>

      <el-row
        v-show="showPropertiesCollapse(['condition-style-selector']) && markSelectorShow"
        class="de-collapse-style"
      >
        <span class="padding-lr">{{ $t('chart.function_style') }}</span>
        <el-collapse
          v-model="styleActiveNames"
          class="style-collapse"
        >
          <el-collapse-item
            v-show="showPropertiesCollapse(['condition-style-selector']) && markSelectorShow"
            name="conditionStyle"
            :title="$t('chart.condition_style')"
          >

            <map-mark-selector
              :param="param"
              class="attr-selector"
              :chart="chart"
              :view="view"
              :dimension-data="dimensionData"
              :quota-data="quotaData"
              @onMarkChange="onMarkChange"
            />
          </el-collapse-item>
        </el-collapse>
      </el-row>
    </div>
  </el-row>
</template>
<script>
import PluginCom from '@/views/system/plugin/PluginCom'
import ColorSelector from '@/views/chart/components/shapeAttr/ColorSelector'
import SizeSelector from '@/views/chart/components/shapeAttr/SizeSelector'
import SizeSelectorAntV from '@/views/chart/components/shapeAttr/SizeSelectorAntV'
import SizeSelectorElementUi from '@/views/chart/components/shapeAttr/SizeSelectorElementUI'
import FieldSelectorElementUi from '@/views/chart/components/shapeAttr/FieldSelector'
import LabelSelector from '@/views/chart/components/shapeAttr/LabelSelector'
import LabelSelectorAntV from '@/views/chart/components/shapeAttr/LabelSelectorAntV'
import TooltipSelector from '@/views/chart/components/shapeAttr/TooltipSelector'
import TooltipSelectorAntV from '@/views/chart/components/shapeAttr/TooltipSelectorAntV'
import TotalCfg from '@/views/chart/components/shapeAttr/TotalCfg'
import XAxisSelector from '@/views/chart/components/componentStyle/XAxisSelector'
import XAxisSelectorAntV from '@/views/chart/components/componentStyle/XAxisSelectorAntV'
import YAxisSelector from '@/views/chart/components/componentStyle/YAxisSelector'
import YAxisSelectorAntV from '@/views/chart/components/componentStyle/YAxisSelectorAntV'
import YAxisExtSelector from '@/views/chart/components/componentStyle/YAxisExtSelector'
import YAxisExtSelectorAntV from '@/views/chart/components/componentStyle/YAxisExtSelectorAntV'
import TitleSelector from '@/views/chart/components/componentStyle/TitleSelector'
import TitleSelectorAntV from '@/views/chart/components/componentStyle/TitleSelectorAntV'
import LegendSelector from '@/views/chart/components/componentStyle/LegendSelector'
import MarginSelector from '@/views/chart/components/componentStyle/MarginSelector'
import LegendSelectorAntV from '@/views/chart/components/componentStyle/LegendSelectorAntV'
import BackgroundColorSelector from '@/views/chart/components/componentStyle/BackgroundColorSelector'
import SplitSelector from '@/views/chart/components/componentStyle/SplitSelector'
import SplitSelectorAntV from '@/views/chart/components/componentStyle/SplitSelectorAntV'
import SuspensionSelector from '@/components/suspensionSelector'
import MapMarkSelector from '@/views/chart/components/functionStyle/MapMarkSelector'
import { mapState } from 'vuex'

export default {
  name: 'ChartStyle',
  components: {
    SplitSelectorAntV,
    SplitSelector,
    BackgroundColorSelector,
    LegendSelectorAntV,
    LegendSelector,
    TitleSelectorAntV,
    TitleSelector,
    YAxisExtSelectorAntV,
    YAxisExtSelector,
    YAxisSelectorAntV,
    YAxisSelector,
    XAxisSelectorAntV,
    XAxisSelector,
    TotalCfg,
    TooltipSelectorAntV,
    TooltipSelector,
    LabelSelectorAntV,
    LabelSelector,
    SizeSelectorAntV,
    SizeSelectorElementUi,
    FieldSelectorElementUi,
    SizeSelector,
    ColorSelector,
    MarginSelector,
    PluginCom,
    SuspensionSelector,
    MapMarkSelector
  },
  props: {
    chart: {
      type: Object,
      required: true
    },
    param: {
      type: Object,
      required: true
    },
    view: {
      type: Object,
      required: true
    },
    properties: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    },
    dimensionData: {
      type: Array,
      required: false,
      default: function() {
        return []
      }
    },
    quotaData: {
      type: Array,
      required: false,
      default: function() {
        return []
      }
    },
    propertyInnerAll: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      attrActiveNames: [],
      styleActiveNames: []
    }
  },
  computed: {
    pluginShow() {
      return this.view.isPlugin && !this.batchOptStatus
    },
    markSelectorShow() {
      const hasViewFields = this.view?.viewFields?.length
      if (hasViewFields) {
        let hasx = false
        let hasy = false
        for (let index = 0; index < this.view.viewFields.length; index++) {
          const element = this.view.viewFields[index]
          if (element.busiType === 'locationXaxis') {
            hasx = true
          }
          if (element.busiType === 'locationYaxis') {
            hasy = true
          }
          if (hasx && hasy) {
            break
          }
        }
        if (hasx && hasy) {
          return true
        }
      }
      return false
    },
    ...mapState([
      'batchOptStatus'
    ])
  },
  created() {

  },
  methods: {
    showProperties(property) {
      return this.properties && this.properties.length && this.properties.includes(property)
    },
    showPropertiesCollapse(propertiesInfo) {
      let includeCount = 0
      // Property does not support mixed mode
      if (propertiesInfo.includes('no-mix') && this.chart.type.includes('mix')) {
        return false
      } else {
        propertiesInfo.forEach(property => {
          this.properties.includes(property) && includeCount++
        })
        return includeCount > 0
      }
    },
    calcStyle() {
      this.$emit('calcStyle')
    },
    onFieldChange(val, propertyName) {
      console.log('chatStyle这层接收', val)
      val['propertyName'] = propertyName
      this.$emit('onFieldChange', val)
    },
    onColorChange(val, propertyName) {
      val['propertyName'] = propertyName
      this.$emit('onColorChange', val)
    },
    onSuspensionChange(val, propertyName) {
      val['propertyName'] = propertyName
      this.$emit('onSuspensionChange', val)
    },
    onSizeChange(val, propertyName) {
      console.log('chatStyle这层接收', val)
      console.log('propertyName', propertyName)
      val['propertyName'] = propertyName
      this.$emit('onSizeChange', val)
    },
    onLabelChange(val, propertyName) {
      val['propertyName'] = propertyName
      this.$emit('onLabelChange', val)
    },
    onTooltipChange(val, propertyName) {
      val['propertyName'] = propertyName
      this.$emit('onTooltipChange', val)
    },
    onTotalCfgChange(val, propertyName) {
      val['propertyName'] = propertyName
      this.$emit('onTotalCfgChange', val)
    },
    onChangeXAxisForm(val, propertyName) {
      val['propertyName'] = propertyName
      this.$emit('onChangeXAxisForm', val)
    },
    onChangeYAxisForm(val, propertyName) {
      val['propertyName'] = propertyName
      this.$emit('onChangeYAxisForm', val)
    },
    onChangeYAxisExtForm(val, propertyName) {
      val['propertyName'] = propertyName
      this.$emit('onChangeYAxisExtForm', val)
    },
    onChangeSplitForm(val, propertyName) {
      val['propertyName'] = propertyName
      this.$emit('onChangeSplitForm', val)
    },
    onTextChange(val, propertyName) {
      val['propertyName'] = propertyName
      this.$emit('onTextChange', val)
    },
    onLegendChange(val, propertyName) {
      val['propertyName'] = propertyName
      this.$emit('onLegendChange', val)
    },
    onMarginChange(val, propertyName) {
      val['propertyName'] = propertyName
      this.$emit('onMarginChange', val)
    },
    onChangeBackgroundForm(val, propertyName) {
      val['propertyName'] = propertyName
      this.$emit('onChangeBackgroundForm', val)
    },
    onMarkChange(val, propertyName) {
      val['propertyName'] = propertyName
      this.$emit('onMarkChange', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.de-collapse-style {
  ::v-deep.el-collapse-item__header {
    height: 34px !important;
    line-height: 34px !important;
    padding: 0 0 0 6px !important;
    font-size: 12px !important;
    font-weight: 400 !important;
  }
}

.padding-lr {
  padding: 0 6px;
}

.col {
  width: 40%;
  flex: 1;
  padding: 10px;
  border: solid 1px #eee;
  border-radius: 5px;
  float: left;
}

.col+.col {
  margin-left: 10px;
}

.view-panel {
  display: flex;
  height: 100%;
  background-color: #f7f8fa;
}

.blackTheme .view-panel {
  background-color: var(--MainBG);
}

.el-form-item {
  margin-bottom: 0;
}

span {
  font-size: 12px;
}

.tab-header ::v-deep .el-tabs__header {
  border-top: solid 1px #eee;
  border-right: solid 1px #eee;
}

.tab-header ::v-deep .el-tabs__item {
  font-size: 12px;
  padding: 0 !important;
}

.blackTheme .tab-header ::v-deep .el-tabs__item {
  background-color: var(--MainBG);
}

.tab-header ::v-deep .el-tabs__nav-scroll {
  padding-left: 0 !important;
}

.tab-header ::v-deep .el-tabs__header {
  margin: 0 !important;
}

.tab-header ::v-deep .el-tabs__content {
  height: calc(100% - 40px);
}

.chart-icon {
  width: 20px;
  height: 20px;
}

.el-radio {
  margin: 5px;
}

.el-radio ::v-deep .el-radio__label {
  padding-left: 0;
}

.attr-style {
  height: calc(100vh - 56px - 60px - 40px - 40px);
}

.blackTheme .attr-style {
  color: var(--TextPrimary);
}

.attr-selector {
  width: 100%;
  height: 100%;
  margin: 6px 0;
  padding: 0 4px;
  display: flex;
  align-items: center;
  background-color: white
}

.blackTheme .attr-selector {

  background-color: var(--MainBG)
}

.dialog-css ::v-deep .el-dialog__title {
  font-size: 14px;
}

.dialog-css ::v-deep .el-dialog__header {
  padding: 20px 20px 0;
}

.dialog-css ::v-deep .el-dialog__body {
  padding: 10px 20px 20px;
}

.blackTheme .theme-border-class {
  color: var(--TextPrimary) !important;
  background-color: var(--ContentBG);
}

.blackTheme .padding-lr {
  border-color: var(--TableBorderColor) !important;
}

.blackTheme .theme-item-class {
  background-color: var(--MainBG) !important;
  border-color: var(--TableBorderColor) !important;
}

.icon-class {
  color: #6c6c6c;
}

.blackTheme .icon-class {
  color: #cccccc;
}

.radio-span ::v-deep .el-radio__label {
  margin-left: 4px;
}

.view-title-name {
  display: -moz-inline-box;
  display: inline-block;
  width: 130px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-left: 45px;
}

::v-deep .item-axis {
  width: 128px !important;
}

::v-deep .el-slider__input {
  width: 80px !important;
}

::v-deep .el-input-number--mini {
  width: 100px !important;
}

::v-deep .el-slider__runway.show-input {
  width: 80px !important;
}

.no-senior {
  width: 100%;
  text-align: center;
  font-size: 12px;
  padding-top: 40px;
  overflow: auto;
  border-right: 1px solid #e6e6e6;
  height: 100%;
}

.form-item-slider ::v-deep .el-form-item__label {
  font-size: 12px;
  line-height: 38px;
}

.form-item ::v-deep .el-form-item__label {
  font-size: 12px;
}

.no-properties {
  width: 100%;
  text-align: center;
  font-size: 12px;
  padding-top: 40px;
  overflow: auto;
  height: 100%;
}
.style-collapse .colorSelector ::v-deep .el-collapse-item__wrap {
  overflow: auto !important;
}
</style>
